<template>
  <div class="login_bg">
    <div class="login_centont">
      <div class="login_title">后台管理系统</div>
      <div class="login_form">
        <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
          @finish="onFinish" @finishFailed="onFinishFailed" style="width: 90%">
          <a-form-item label="账号" name="username" :rules="[{ required: true, message: '请输入您的用户名!' }]">
            <a-input v-model:value="formState.username" />
          </a-form-item>

          <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入您的密码!' }]">
            <a-input-password v-model:value="formState.password" />
          </a-form-item><!--  -->
          <a-form-item label="验证码" name="checkCode" :rules="[{ required: true, message: '请输入您的验证码!' }]">
            <a-input v-model:value="formState.checkCode" />
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <div class="code_svg">
              <div v-html="SVG" id="svg"></div>
              <a-button type="primary" @click="getcheckCode">看不清刷新一下</a-button>
            </div>
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 8, span: 16 }" name="remember">
            记住密码：<a-switch v-model:checked="formState.remember" />  
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 8, span: 16 }" name="remember"> 
            <a-button type="primary" html-type="submit" style="width: 100%">登录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { getcheckCodeApi, userLoginApi } from '@/api';
import { useUserStore } from '@/store/modules/userInfo';
import { setRefreshToken, setToken } from '@/utils/auth';
import { useRouter } from 'vue-router'
import { message  } from 'ant-design-vue'
const router  = useRouter()
const useStore = useUserStore();

let uuid = Date.now();
let SVG = ref();

interface FormState {
  username: string;
  password: string;
  checkCode: string;
  remember: boolean;
}

const formState = reactive<FormState>({
  username: '',
  password: '',
  checkCode: '',
  remember: useStore.$state.remember,
});

const onFinish = (values: FormState) => { 
  userLoginApi({ ...values, uuid }).then((result) => { 
      if (result.code == 0) { 
        setToken(result.data.token),
        setRefreshToken(result.data.refreshToken) 
        useStore.$patch({
            remember: values.remember,
        });
        router.push('/layout') 
        message.success({
          content:result.message,
          class:'message_success', 
        })  
      }else{ 
        message.error({
          content:result.message,
          class:'message_error', 
        })  
      }
  }
  );
};

const onFinishFailed = (errorInfo: FormState) => {
  console.log('Failed:', errorInfo);
};

// 图形验证码
const getcheckCode = () => { 
  getcheckCodeApi({ uuid }).then((res) => { 
    SVG.value = res.data; 
  });
};
getcheckCode();


onMounted(()=>{
  
})
</script>

<style lang="scss" scoped>
.login_bg {
  width: 100%;
  height: 100vh;
  background: url('../../assets/wallhaven-nkexld2.jpg') no-repeat;
  background-size: 100% 100%;

  .login_centont {
    width: 600px;
    height: 500px;
    background-color: rgba(255, 255, 255, 0.524);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 10px 0 rgba(0, 0, 0, 0.323);
    padding: 25px 25px;
    margin: 0 auto;
    position: relative;
    top: 20%;

    .login_title {
      width: 100%;
      height: 60px;
      font-size: 26px;
      font-weight: 700;
      text-align: center;
      line-height: 60px;
      border-bottom: 5px solid#37A2D9;
    }

    .login_form {
      display: flex;
      // justify-content: center;
      align-items: center;
      width: 100%;
      padding-top: 60px;

      .code_svg {
        display: flex;
        justify-content: space-between;
      }
    }
  }
} 

</style>
<style>


</style>
